<template>
    <div class="tableTool" :style="{ top: filterToolTop + 10 + 'px', left: filterToolLeft + 'px' }">
        <el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search" type="text" placeholder="搜索"
            @input="seachKey" oninput="if(value.length>11)value=value.slice(0,100)">
        </el-input>
        <div class="select-box">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                id="checkAll">全选</el-checkbox>
            <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(item, index) in options" :label="item" :key="index">
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="bottom">
            <el-button size="mini" @click="$emit('closeTool')">取消</el-button>
            <el-button type="primary" size="mini" @click="save">确认</el-button>
        </div>
        <i class="el-icon-caret-top"></i>
    </div>
</template>
<script>
export default {
    name: 'tableCol',
    props: {
        filterToolLeft: {
            required: true,
            type: Number
        },
        filterToolTop: {
            required: true,
            type: Number
        },
        // 已经选中的数据
        seachData: {
            required: true,
            type: Object
        },
        // 正在更改哪个
        seachType: {
            required: true,
            type: String
        },
        // 需要后端给的所有数据
        allOptionsObj: {
            required: true,
            type: Object
        },
        useTableToolComponent: {
            default: null
        }
    },
    data() {
        return {
            keyword: '',
            checkAll: false,
            checkedList: [],
            options: [],
            isIndeterminate: true,
            allOptions: []
        };
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedList = val ? this.allOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.options.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
        },
        save() {
            this.seachData[this.seachType] = this.checkedList
            //  把查询条件给父组件 
            this.$emit('saveSeach', this.seachData)
        },
        seachKey() {
            this.allOptions = this.allOptionsObj[this.seachType].filter(item => item.indexOf(this.keyword) != -1)
            this.options = this.allOptions
            this.checkedList = []
            this.checkAll = false
        },
        setposition() {
            let boxEl = document.querySelector('.tableTool')
            let icon = document.querySelector('.tableTool .el-icon-caret-top')
            if (this.filterToolLeft + boxEl.offsetWidth + 48 > document.body.clientWidth) {
                boxEl.style.transform = 'translateX(-90%)';
                icon.style.left = '90%'
            }
        },
    },
    created() {

    },
    async mounted() {
        this.allOptions = this.allOptionsObj[this.seachType]
        this.options = this.allOptions
        document.querySelector('#checkAll').click()
        this.setposition()
    },
    beforeMount() {
        let that = this
        this._close = e => {
            let isFlag = that.$el.contains(e.target) || e.target.className.indexOf('el-icon-caret-bottom') != -1
            if (!isFlag) {
                that.$emit('closeTool')
            }
        }
        document.body.addEventListener('click', this._close)
    },
    beforeDestroy() {
        document.body.removeEventListener('click', this._close)
    },
};
</script>

<style lang="scss" scoped>
.tableTool {
    position: fixed;
    background: #fff;
    box-shadow: 0 0 5px #ccc;
    padding: 10px;
    z-index: 999;

    .el-input__inner::v-deep {
        padding-left: 30px;
    }

    .select-box {
        border: #ccc solid 1px;
        padding: 10px;
        margin-top: 10px;
        max-height: 280px;
        overflow: auto;
        max-width: 400px;
    }

    ::v-deep .el-checkbox {
        display: block;
        margin-top: 5px;
    }

    .bottom {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .el-icon-caret-top {
        position: absolute;
        color: #fff;
        top: -10px;
    }

}
</style>
